<template>
	<view class="search">
		<view class="con-wrap">
			<view class="scrollWrap">
				<z-paging :fixed="false" ref="paging" v-model="dotList" @query="queryList">
					<template #empty>
						<emptyView></emptyView>
					</template>
					<view class="box-container">
						<view class="mid" v-for="(item, index) in dotList" :key="index" @click="handelAppoint(item)">
							<view class="con-left">
								<image :src="$fullImageUrl(item.avatarUrl)"></image>
							</view>
							<view class="con-right">
								<view class="con-right-top">
									<view>
										<view>{{ item.expertName }}</view>
									</view>
									<view>
										<image :src="$buildFullImageUrl('/static/consult/address.svg')"></image>
										<text>{{ item.cityCopy }}</text>
									</view>
								</view>
								<view class="con-right-mid">
									<view>{{ item.title }}</view>
									<view @click.stop="cancleAttent(item)">移除</view>
								</view>
								<view class="con-right-bot">
									<view>时长：{{ item.totalConsultHours }}+</view>
									<view>从业{{ item.workingYears }}年</view>
								</view>
							</view>
						</view>
					</view>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAttentionExpertList,
		setExpertUser
	} from '@/api/consult/index.js';
	import {
		getLastPartAfterLastComma
	} from '@/utils/common.js';
	export default {
		data() {
			return {
				dotList: []
			};
		},
		onShow() {
			this.$refs.paging.reload();
		},
		methods: {
			queryList(pageNum, pageSize) {
				const querys = {
					pageNum,
					pageSize,
				};
				getAttentionExpertList(querys).then((res) => {
					let list = [...res.rows];
					list.map((i) => {
						i.cityCopy = getLastPartAfterLastComma(i.city);
					});
					this.$refs.paging.completeByTotal(list, res.total);
				});
			},
			handelAppoint(e) {
				this.$tab.navigateTo(`/subset/pages/consult/consultDetail?id=${e.id}`);
			},
			cancleAttent(e) {
				let obj = {
					attentionStatus: '1',
					expertId: e.id * 1,
					userId: uni.getStorageSync('user_id')
				};
				setExpertUser(obj).then((res) => {
					this.$refs.paging.reload();
					this.$modal.showToast('已取消关注');
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.search {
		width: 100%;
		height: 100%;
		background: #fff;

		.con-wrap {
			width: 100%;
			height: 100%;
			background-color: #fff;

			.scrollWrap {
				width: 100%;
				height: 100%;
			}

			.box-container {
				width: 100%;
				// height: 100%;
				padding: 20rpx 30rpx 0 32rpx;
				box-sizing: border-box;

				.mid {
					width: 100%;
					height: 216rpx;
					margin-bottom: 24rpx;
					padding: 14rpx 0rpx 14rpx 12rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;

					.con-left {
						width: 162rpx;
						height: 188rpx;
						border-radius: 20rpx;
						position: relative;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
							position: absolute;
							left: 0;
							top: 0;
						}

						>view {
							width: 100%;
							height: 44rpx;
							line-height: 44rpx;
							text-align: center;
							font-weight: 600;
							font-size: 24rpx;
							color: #ffffff;
							position: absolute;
							bottom: 0;
							left: 0;
							background: rgba(0, 0, 0, 0.3);
						}
					}

					.con-right {
						width: calc(100% - 186rpx);
						height: 100%;
						padding-top: 10rpx;
						display: flex;
						flex-wrap: wrap;
						align-content: space-between;

						&-top {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;

							>view:first-child {
								display: flex;
								align-items: center;

								>view:nth-child(1) {
									font-family: PingFang SC;
									font-weight: 600;
									font-size: 28rpx;
									color: #333333;
									margin-right: 20rpx;
								}

								>view:nth-child(2) {
									display: flex;
									align-items: center;

									>text:nth-child(1) {
										font-weight: 400;
										font-size: 20rpx;
										color: #5c83fd;
									}

									>text:nth-child(2) {
										font-weight: 600;
										font-size: 28rpx;
										color: #5c83fd;
										margin: 0 10rpx 4rpx;
									}

									>text:nth-child(3) {
										font-weight: 400;
										font-size: 20rpx;
										color: #5c83fd;
									}
								}
							}

							>view:last-child {
								display: flex;
								align-items: center;

								image {
									width: 30rpx;
									height: 25rpx;
									margin-right: 4rpx;
								}

								text {
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
									padding-right: 14;
								}
							}
						}

						&-mid {
							width: 100%;
							display: flex;
							justify-content: space-between;

							>view:nth-child(1) {
								width: calc(100% - 114rpx);
								text-overflow: ellipsis;
								white-space: nowrap;
								overflow: hidden;
								font-weight: 400;
								font-size: 24rpx;
								color: #333333;
							}

							>view:nth-child(2) {
								width: 104rpx;
								height: 44rpx;
								line-height: 44rpx;
								background: linear-gradient(117deg, #e2b1e8 0%, #77b8fa 47%, #597ff7 100%);
								box-shadow: 0rpx 0rpx 6rpx rgba(126, 191, 254, 0.1);
								border-radius: 22rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #ffffff;
								text-align: center;
							}
						}

						&-bot {
							width: 100%;
							display: flex;

							// margin-top: 18rpx;
							>view {
								padding: 2rpx 8rpx;
								background: rgba(253, 193, 78, 0.1);
								border-radius: 18rpx;
								border: 1px solid #fdba41;
								font-weight: 400;
								font-size: 20rpx;
								color: #ff9300;
							}

							>view:nth-child(2) {
								margin-left: 14rpx;
							}
						}
					}
				}
			}
		}
	}
</style>